import React, {useState} from 'react'
import { Link, Outlet } from 'react-router-dom'
export default function Message() {
  const [message] = useState([
    {
      id: 1,
      title: '消息1',
      content: '春眠不觉晓'
    },
    {
      id: 2,
      title: '消息2',
      content: '处处闻啼鸟'
    },
    {
      id: 3,
      title: '消息3',
      content: '夜来风雨声'
    },
    {
      id: 4,
      title: '消息4',
      content: '花落知多少',
    },
  ])
  return (
    <div>
        <ul>
        {message.map(item => (
          <li key={item.id}>
            <Link to="detail" state={{id: item.id, title: item.title, content: item.content}}>{item.title}</Link>
         </li>
        ))}
        </ul>
        <Outlet></Outlet>
    </div>
  )
}
